<template>
  <el-dialog :title="$t('commonDetail')" :visible.sync="visible" :close-on-click-modal="false" width="40%" top="10vh">
    <div class="sketch_content">
      <el-form :model="form" label-width="120px" ref="dataForm">
        <el-form-item :label="$t('faq.question') + ':'">
          <span>{{form.question}}</span>
        </el-form-item>
        <el-form-item :label="$t('faq.type') + ':'">
          <span v-if="form.type === 1">{{$t('faq.type1')}}</span>
          <span v-if="form.type === 2">{{$t('faq.type2')}}</span>
        </el-form-item>
        <el-form-item :label="$t('faq.orderNum') + ':'">
          <span>{{form.orderNum}}</span>
        </el-form-item>
        <el-form-item :label="$t('faq.remark') + ':'">
          <span>{{form.remark}}</span>
        </el-form-item>
        <el-form-item :label="$t('commonCreateTime') + ':'">
          <span>{{form.createTime}}</span>
        </el-form-item>
        <el-form-item :label="$t('faq.answer') + ':'">
          <div class="p-zero" v-html="form.answer"/>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" icon="el-icon-close" @click.native="visible = false">{{$t('commonClose')}}</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        form: {}
      }
    },
    methods: {
      init (id) {
        this.form = {}
        this.visible = true
        if (id) {
          this.httpGet(`/faq/info/${id}`).then(res => {
            this.form = res.data
          })
        }
      }
    }
  }
</script>

